<template>
  <div class="userlist">
    <el-table
      :data="tableData"
      style="width: 400px">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.row,tableData)"
            type="text"
            size="small">
            移除
          </el-button>
          <el-button
            @click.native.prevent="showEdit(scope.row)"
            type="text"
            size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="/api/users/uploadhead/"
            :headers = headers
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.userImage" :src='form.userImage' class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [],
          dialogFormVisible:false,
          form:{
            name:'',
            age:'',
            password:'',
          },
          formLabelWidth: '120px',
          headers:{
            token:localStorage.getItem('token')
          }
        }
      },
      mounted(){
        this.getUser()
      },
      methods:{
        getUser(){
          this.$get('/api/users/list').then(res => {
            console.log(res)
            if (res.data.code == 1) {
              this.tableData = res.data.result
            }
          })
        },
        deleteRow(row,tableData){
          let _this = this;
          this.$post('/api/users/del',{id:row.id}).then(res => {
            console.log(res.data)
            if (res.data.code == 1) {
              _this.$notify({
                title: '成功',
                message: res.data.result,
                type: 'success'
              });
              this.getUser()
            }
          })
        },
        showEdit(row){
          this.form = row;
          this.dialogFormVisible = true
        },
        edit(){
          let _this = this;
          this.dialogFormVisible = false;
          this.$post('/api/users/update',{...this.form}).then(res => {
            console.log(res.data)
            if (res.data.code == 1) {
              _this.$notify({
                title: '成功',
                message: res.data.result,
                type: 'success'
              });
              this.getUser()
            }
          })
        },
        handleAvatarSuccess(res, file) {
          console.log(res)
          console.log(file)
          if (res.code == 1) {
            this.form.userImage = `http://192.168.112.27:3000/${res.url}`;
          }
        },
        beforeAvatarUpload(file) {
          // const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          // if (!isJPG) {
          //   this.$message.error('上传头像图片只能是 JPG 格式!');
          // }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isLt2M;
        }
      }
    }
  </script>
  <style>
  .avatar-uploader,.avatar{
    width: 100px;
  }
  </style>